<template>
    <!--地图挂载dom-->
    <div id="map">
    </div>
</template>

<script>
    //引入依赖

    import Map from 'ol/Map';
    import View from 'ol/View';
    import Feature from 'ol/Feature';
    import GeoJSON from 'ol/format/GeoJSON';
    import {Circle as CircleStyle, Fill, Icon, Stroke, Style, Text} from 'ol/style';
    import {OSM, Vector as VectorSource} from 'ol/source';
    import {Vector as VectorLayer} from 'ol/layer';
    import {Point} from 'ol/geom';
    import icon from './image/icon.png'
    import TileLayer from 'ol/layer/Tile'

    export default {
        name: 'VectorCircleLayer',
        data() {
            return {}
        },
        mounted() {
            //定义数量数据源
            const vectorSource = new VectorSource();
            let vectorLayer = new VectorLayer({
                source: vectorSource,
            })
            this.map = new Map({
                layers: [new TileLayer({
                    source: new OSM()//加载OpenStreetMap
                }), vectorLayer],
                target: 'map',
                view: new View({
                    center: [116.38916015624999, 39.926588421909436],
                    projection: "EPSG:4326", //指定投影
                    zoom: 4,
                }),
            });

            this.addFeatureStyle(vectorSource);

        },
        methods: {
            //给不同的要素设置不同的样式
            addFeatureStyle(vectorSource) {
                fetch('http://localhost:8888/openlayer/geojson/china.json')
                    .then(response => response.json())
                    .then((json) => {
                        console.log(json)
                        //读取geojson数据渲染geojson的要素数据
                        const features = new GeoJSON().readFeatures(json);
                        vectorSource.addFeatures(features);
                        //遍历每一个要素
                        for (const feature of features) {
                            //设置每个要素的填充样式和描边样式
                            feature.setStyle(new Style({
                                stroke: new Stroke({
                                    color: 'magenta',
                                }),
                                fill: new Fill({color: "#4e98f444"}),
                            }));
                            //获取到中心点属性信息
                            let center = feature.get("centroid");
                            if (center) {
                                //生成一个点要素
                                let pointFeature = new Feature({
                                    geometry: new Point(center), //几何信息
                                });
                                //设置点要素的样式
                                pointFeature.setStyle(new Style({
                                    image: new CircleStyle({//给点要素设置圆的样式
                                        radius: 10,//半径
                                        fill: new Fill({
                                            color: "#54ff2a"//填充颜色
                                        }),
                                        stroke: new Stroke({
                                            color: "#ff5042"//描边样式
                                        })

                                    })
                                }))
                                let clone = pointFeature.clone();
                                clone.setStyle(new Style({
                                    image: new CircleStyle({
                                        radius: 10,
                                        fill: new Fill({
                                            color: "#ff232b"
                                        }),
                                        stroke: new Stroke({
                                            color: "#59ff43"
                                        }),
                                        displacement: [20, 20],//数据位置偏移
                                        scale: 2,
                                        rotation: Math.PI_OVER_FOUR,//旋转45度
                                        rotateWithView: false//是否随着视口旋转
                                    })
                                }))
                                vectorSource.addFeatures([pointFeature, clone]);
                            }
                        }
                        this.map.getView().fit(vectorSource.getExtent());
                    });
            }
        }
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }
</style>
